<script setup lang="ts">


</script>

<template>
    <div class="box">
        <header>
            <router-link class="header-logo" to="/"></router-link>
            <div class="header-button">
                <div class="button">
                    <router-link to="/login">
                        登录
                    </router-link>
                </div>
                <div class="button">
                    <router-link to="/register">
                        注册
                    </router-link>
                </div>
            </div>
        </header>
        <div class="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$header_height: 0.3rem;
$logo_width: 0.6rem;

.box {
    height: auto;
    width: 100%;
    margin: 0 0;

    header {
        background: rgb(190, 190, 100);
        background-position: bottom;
        background-repeat: repeat no-repeat;
        background-size: auto cover;
        position: fixed;
        border: 0.1rem;
        border-radius: 0.1rem;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;

        .header-logo {
            background-image: url("@/assets/logo/logo.png");
            display: inline-block;
            width: $logo_width;
            height: $header_height;
            line-height: $logo_width;
            margin: 0 0.1rem;
            background-size: cover;
            background-repeat: no-repeat;
            vertical-align: top;
            background-position: center center;
        }

        .header-button {
            width: $logo_width*1.5;
            height: $header_height;
            float: right;
            display: flex;
            justify-content: space-around;
            align-items: center;


            .button {
                color: black;
                transition: color 0.25s;

                &:hover {
                    text-decoration: none;
                    color: #223c94;
                    border-bottom: #979daf 3px solid;
                }
            }

        }
    }

    .main {
        height: 5rem;
        background-color: #223c94;
    }
}

a {
    text-decoration: none;
}
</style>
